import React, {Component,} from 'react'
import {connect,} from 'react-redux'
import {withRouter,} from 'react-router-dom'

import {Tabs,} from 'antd-mobile'
import './index.css'

import constants from "../../../../../utils/constants"
import {NANO_ODDS_COMPANY_CODE} from "../../../../../redux/game";
import AsiaOddsTable from "./AsiaOddsTable/AsiaOddsTable";
import EuroOddsTable from "./EuroOddsTable/EuroOddsTable";
import GameIntelligence from "./GameIntelligence/GameIntelligence";
import GameAI from "./GameAI/GameAI";
import BigSmallTable from "./BigSmallTable/BigSmallTable";
// import NoDataPage from "../../../../game/Football/NoDataPage/NoDataPage";
import LocalStorageService from "../../../../../utils/LocalStorageService";
import Live from "../live/live";

class Index extends Component {

    constructor(props) {
        super(props)

        this.sortedOdds = {
            asia: {},
            eu: {},
            bs: {},
            fetched: false,
        }
    }

    componentDidMount() {

        let id = this.props.match.params.gameId
        let uid = localStorage.getItem('userid')
        const login = LocalStorageService.get('isLogin')
        if (login) {
            this.fetchGameAi(uid, id)
            // this.fetchGameAiBuy(uid, id)
        }

        let {statusid,} = this.props.currentGame.info

        this.fetchGameIntelligence(id)
        let p
        if (statusid >= 8) {
            p = this.fetchGameOddsList(id)
        } else {
            p = this.fetchGameOddsList(id)
                .then(() => {
                    if (statusid < 8) {
                        this.freshGameOddsList(id)
                    }
                })
        }

    }

    componentWillUnmount() {
        this.clearFreshGameOddsList()
    }

    fetchGameIntelligence = (id) => {
        return this.props.doFetchGameIntelligence({id})
    }

    fetchGameAi = (uid, matchId) => {
        matchId = Number(matchId)
        return this.props.doFetchGameAi({uid, matchId,})
    }

    fetchGameAiBuy = (uid, matchId) => {
        matchId = Number(matchId)
        return this.props.doFetchGameAiBuy({uid, matchId})
    }

    fetchGameOddsList = (id) => {
        const matchId = id
        return this.props.doFetchGamesOddsList({matchId,})
    }

    freshGameOddsList = (id) => {
        const freshInterval = 60000
        this.freshInterval = setInterval(() => {
            this.props.doFetchGamesOddsList({matchId: id,})
        }, freshInterval)
    }

    clearFreshGameOddsList  = () => {
        this.freshInterval && clearInterval(this.freshInterval)
    }

    render() {

        const userDetail = this.props.user.userdetail
        const vip = userDetail.Vip > 0

        const odds = this.props.currentGame.odds
        if (Object.entries(odds).length === 0) {
            // return <NoDataPage/>
        }
        let tabs = [

            // {
            //     title: '分析',
            //     // value: 'asia',
            // },
            // {
            //     title: '情报',
            //     // value: 'asia',
            // },
            {
                title: '亚指',
                value: 'asia',
            },
            {
                title: '欧指',
                value: 'eu',
            },
            {
                title: '总进球',
                value: 'bs',
            },
        ]

        // if (vip) {
        //     let newTabs = []
        //     newTabs.push(tabs[0])
        //     newTabs.push({title: '情报'})
        //     newTabs.push(...tabs.slice(1))
        //     tabs = newTabs
        // }

        const sortedOdds = this.sortedOdds

        if (odds && odds.err) {
            // return <NoDataPage/>
        }

        const oddsEntries = odds && Object.entries(odds)
        // eslint-disable-next-line array-callback-return
        oddsEntries && oddsEntries.map(e => {

            let [code, value] = e
            let company = NANO_ODDS_COMPANY_CODE[code]

            let ens = e && Object.entries(value)
            ens && ens.forEach(e => {

                let [type, data] = e

                if (sortedOdds[type]) sortedOdds[type][company] = data

            })

        })

        const dataToTableDate = (data) => {

            const dataEntries = Object.entries(data)

            let tbodyData = []

            // eslint-disable-next-line array-callback-return
            dataEntries.map(obj => {
                let trData = []

                let [company, dataArr] = obj

                trData.push(company)

                let l = dataArr.length
                let first = dataArr[l - 1].slice(2,5)
                let latest = dataArr[0].slice(2,5)

                trData = trData.concat(first, latest)

                tbodyData.push(trData)
            })

            return tbodyData
        }

        return <Tabs
            initialPage={0}
            swipeable={false}
            animated={false}
            tabs={tabs}
            tabBarUnderlineStyle={{border: 'none',}}
            tabBarBackgroundColor='rgba(255,255,255,0.6)'
            tabBarActiveTextColor={`#FFA500`}
            tabBarInactiveTextColor='#333'
            tabBarTextStyle={{fontSize: '14px',}}
            prerenderingSiblingsNumber={0}
            // prefixCls='game-room-ai '
        >
            {/*<GameAI/>*/}
            <AsiaOddsTable
                data={dataToTableDate(sortedOdds.asia)}
                bindScrollEvent={this.props.bindScrollEvent}
                setContentCtn={this.props.setContentCtn}
            />
            <EuroOddsTable
                data={dataToTableDate(sortedOdds.eu)}
                originData={sortedOdds.eu}
                bindScrollEvent={this.props.bindScrollEvent}
                setContentCtn={this.props.setContentCtn}
            />
            <BigSmallTable
                data={dataToTableDate(sortedOdds.bs)}
                bindScrollEvent={this.props.bindScrollEvent}
                setContentCtn={this.props.setContentCtn}
            />
        </Tabs>

        if (vip) {
            return (
                <Tabs
                    initialPage={0}
                    swipeable={false}
                    animated={false}
                    tabs={tabs}
                    tabBarUnderlineStyle={{border: 'none',}}
                    tabBarBackgroundColor='rgba(255,255,255,0.6)'
                    tabBarActiveTextColor={`#FFA500`}
                    tabBarInactiveTextColor='#333'
                    tabBarTextStyle={{fontSize: '14px',}}
                    // prefixCls='game-room-ai '
                >
                    <GameAI/>
                    <GameIntelligence/>
                    <AsiaOddsTable data={dataToTableDate(sortedOdds.asia)}/>
                    <EuroOddsTable data={dataToTableDate(sortedOdds.eu)} originData={sortedOdds.eu}/>
                    <BigSmallTable data={dataToTableDate(sortedOdds.bs)}/>
                </Tabs>
            )
        } else {
            return <Tabs
                initialPage={0}
                swipeable={false}
                animated={false}
                tabs={tabs}
                tabBarUnderlineStyle={{border: 'none',}}
                tabBarBackgroundColor='rgba(255,255,255,0.6)'
                tabBarActiveTextColor={`#FFA500`}
                tabBarInactiveTextColor='#333'
                tabBarTextStyle={{fontSize: '14px',}}
                // prefixCls='game-room-ai '
            >
                <GameAI/>
                <AsiaOddsTable data={dataToTableDate(sortedOdds.asia)}/>
                <EuroOddsTable data={dataToTableDate(sortedOdds.eu)} originData={sortedOdds.eu}/>
                <BigSmallTable data={dataToTableDate(sortedOdds.bs)}/>
            </Tabs>
        }
    }

}

const mapState = state => ({
    games: state.game.games,
    currentGame: state.game.currentGame,
    user: state.user,
})

const mapDispatch = dispatch => ({
    doFetchGameIntelligence: (payload) => dispatch.game.doFetchGameIntelligence(payload),
    doFetchGamesOddsList: (payload) => dispatch.game.doFetchGamesOddsList(payload),
    doFetchGameAi: (payload) => dispatch.game.doFetchGameAi(payload),
    doFetchGameAiBuy: (payload) => dispatch.game.doFetchGameAiBuy(payload),
})

export default connect(mapState, mapDispatch)(withRouter(Index))
